<template>
  <div class="todoapp">
    <TodoHeader @addTask="addTaskHandler"></TodoHeader>
    <TodoMain @delTask="delTaskHandler" :list="showList"></TodoMain>
    <TodoFooter @changeSel="changeSelHandler" :list="showList"></TodoFooter>
  </div>
</template>

<script>
// 1. 渲染数据
// 1.1 在父组件中准备数据传入 TodoMain.vue 中
// 1.2 在子组件中使用 v-for 渲染 li
// 1.3 v-model 绑定 input
// 1.4 li的 class 修改为动态 class

// 2. 添加数据
// 2.1 TodoHeader.vue 中给文本框双向绑定任务名
// 2.2 给文本框绑定键盘按下事件，捕获 enter
// 2.3 当用户触发键盘事件，将数据传递给 父组件
// 2.4 父组件 接收到数据后，添加至 list
// 2.5 在 TodoHeader.vue 中进行非空判断和添加后清空文本框

// 3. 删除数据
// 3.1 在 TodoMain.vue 给删除按钮绑定点击事件，传入 id
// 3.2 将 id 传入 父组件
// 3.3 父组件根据 id 找到对应数据删除

// 4. 统计数量
// 4.1 在 父组件 中将 list 传入 TodoFooter.vue
// 4.2 使用插值表达式渲染即可

// 5. 切换数据
// 需求1: 点亮高亮
// 5.1 在 TodoFooter.vue 中定义状态 isSel，取值范围是 all/yes/no
// 5.2 动态绑定 class ，根据状态来决定哪个 a 标签应用 selected 类名
// 5.3 父组件收到 isSel 后，保存到 data 中
// 5.4 父组件 中定义计算属性，根据 isSel 的状态来筛选数据并返回

// 导入
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      list: [
        { id: 100, name: '吃饭', isDone: true },
        { id: 201, name: '睡觉', isDone: false },
        { id: 103, name: '打豆豆', isDone: true }
      ],
      isSel: 'all'
    }
  },
  methods: {
    addTaskHandler (taskname) {
      let id =
        this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100
      // 接收 taskname 然后添加进数组，渲染出来
      this.list.push({
        id,
        name: taskname,
        isDone: false
      })
    },
    delTaskHandler (id) {
      // 接收 id ，根据 id 找到具体数据删除
      this.list.forEach((item, index) => {
        if (item.id == id) {
          this.list.splice(index, 1)
        }
      })
    },
    changeSelHandler (isSel) {
      this.isSel = isSel
    }
  },
  computed: {
    // 筛选列表
    showList () {
      // 筛选状态为 yes 的
      if (this.isSel == 'yes') {
        // 找到 isDone 是 true 的
        return this.list.filter(item => item.isDone)
      } else if (this.isSel == 'no') {
        // 筛选状态为 no 的
        // 找到 isDone 是 false 的
        return this.list.filter(item => !item.isDone)
      } else {
        // 显示全部
        return this.list
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
